<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="4">
          <QuotaList @change="quotaChange"/>
      </el-col>
      <el-col :span="19">
        <el-table
          v-loading="loading"
          :data="quotaValueList"
          row-key="id"
          border
        >
          <el-table-column prop="dimensionNames" label="相关维度" :show-overflow-tooltip="true" width="360"></el-table-column>
          <el-table-column prop="av" label="平均值" :show-overflow-tooltip="true" ></el-table-column>
          <el-table-column prop="mx" label="最大值" :show-overflow-tooltip="true" ></el-table-column>
          <el-table-column prop="mn" label="最小值" :show-overflow-tooltip="true" ></el-table-column>
          <el-table-column prop="sm" label="合计" :show-overflow-tooltip="true" ></el-table-column>
          <el-table-column prop="ct" label="数量" :show-overflow-tooltip="true" ></el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.current"
          :limit.sync="queryParams.size"
          @pagination="getList"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import QuotaList from './QuotaList'
  import { listQuotaValue } from '@/api/quota/define/define'

  export default {
    name: 'Value',
    components: { QuotaList },
    data() {
      return {
        loading: false,
        quotaValueList:[],
        total:0,
        queryParams: {
          current: 1,
          size: 15,
          quotaId: undefined
        }
      }
    },

    methods:{
      resetParams(){
        this.queryParams= {
          current: 1,
            size: 15,
            quotaId: undefined
        }
      },
      quotaChange(quota){
        this.resetParams()
        this.queryParams.quotaId = quota.id
        this.getList();
      },
      getList(){
        this.loading = true
        listQuotaValue(this.queryParams).then(response => {
          this.quotaValueList = response.data.records
          this.total = response.data.total
          this.loading = false

        })


      }
    }
  }
</script>

<style scoped>

</style>
